<template>
	<view class="text-white">
		<cu-custom bgColor="nav-bg-blue" :isBack="true">
			<block slot="content"> 
				{{title}}
			</block>
		</cu-custom>
		<view class="page-body">
		    <view class="page-section page-section-gap" v-if="changeType == 1">
		        <map style="width: 100%;height: 100vh;" scale="12" :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline">
		        </map>
		    </view>
			<view class="sw-train-list cu-timeline" v-else>
				<view class="cu-item text-blue" v-for="(item,index) of trainInfoList" :key="index">
					<view class="text-white content" :class="local && local.station_name == item.stationName ? 'bg-orange' : 'bg-cyan'">
						<view>{{item.stationName}}</view>
						<view>
							<view class="one-cars">
								<text>{{'第一班车 -- 距离:'+ item.firstDistance}}</text><text>{{'【'+item.firstChe+'】'}}</text>
							</view>
							<view class="two-cars">
								<text>{{'第二班车 -- 距离:'+ item.secondDistance}}</text><text>{{'【'+item.secondChe+'】'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sw-fad" @click="changeShow()">{{changeTitle}}</view>
			<view class="sw-fad-2" @click="changeDirc()" v-show="changeType == 2">换向</view>
			<view class="self-location" @click="lastStation()" v-show="changeType == 1">
				我的位置
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				title: '',
				stationList: [],
				trainInfoList: [],
				changeTitle: '线路',
	            latitude: 0,
	            longitude: 0,
	            covers: [],
				polyline: [],
				changeType: 1,
				type: 1,
				intervalObj: null,
				local: {}
			}
		},
		computed:{
			...mapState(['position']),
		},
		onLoad(option) {
			this.title = option.title
			this.latitude = this.position.lat
			this.longitude = this.position.lng
			this.station()
		},
		onUnload() {
			if(this.intervalObj){
				clearInterval(this.intervalObj)
			}
		},
		methods: {
			changeDirc(){
				let that = this
				this.type = 2
				this.stationInfo()
				if(this.intervalObj){
					clearInterval(this.intervalObj)
				}
				this.intervalObj = setInterval(function(){
					that.stationInfo()
				},10000)
			},
			changeShow(){
				let that = this
				this.changeType = this.changeType == 1 ? 2 : 1
				this.changeTitle = this.changeType == 1 ? '线路' : '地图'
				if(this.changeType == 2){
					this.stationInfo()
					if(this.intervalObj){
						clearInterval(this.intervalObj)
					}
					this.intervalObj = setInterval(function(){
						that.stationInfo()
					},10000)
				}else{
					if(this.intervalObj){
						clearInterval(this.intervalObj)
					}
				}
			},
			lastStation(){
				let that = this
				let url = 'http://taxiwebservice.lousw.net/index.php?g=portal&m=webservice&a=zj_zdjl&lat='+this.latitude+'&lon='+this.longitude
				uni.request({
					url: url,
					method: 'GET',
					success(res) {
						if(res.data && res.data.status == 'success'){
							that.local = res.data.data
							that.drawLine()
						}
					}
				})
			},
			station(){
				let that = this
				let url = 'http://taxiwebservice.lousw.net/index.php?g=portal&m=webservice&a=ygdc_zdzb'
				uni.request({
					url: url,
					method: 'GET',
					success(res) {
						if(res.data && res.data.status == 'success'){
							that.stationList = res.data.data
							that.drawLine()
						}
					}
				})
			},
			stationInfo(){
				let that = this
				let url = 'http://taxiwebservice.lousw.net/index.php?g=portal&m=webservice&a=ygdc_'+(this.type == 1 ? 'nm' : 'tyg')+'_time'
				uni.request({
					url: url,
					method: 'GET',
					success(res) {
						if(res.data && res.data.status == 'success'){
							that.trainInfoList = []
							that.trainInfoList = res.data.data
						}
					}
				})
			},
			drawLine(){
				let that = this
				let lines = []
				let markers = []
				this.stationList.forEach((item,index)=>{
					let iconPath = index == 0 ? '../../static/line/4.png': ((that.local && that.local.station_name == item.station_name) ? '../../static/line/position_red.png' : '../../static/line/site.png')
					if(index == that.stationList.length - 1){
						iconPath = '../../static/line/end.png'
					}
					markers.push({
						iconPath: iconPath,
						callout:{content:item.station_name},
						title : item.station_name,
						longitude: item.longitude,
						latitude: item.latitude,
						width: (that.local && that.local.station_name == item.station_name) ? '80rpx' : '40rpx',
						height: (that.local && that.local.station_name == item.station_name) ? '80rpx' : '40rpx'
					})
					lines.push({
						longitude: item.longitude,
						latitude: item.latitude
					})
				})
				this.polyline = [{
					points: lines,
					color: "#0091ff",
					width: 6,
					arrowLine: true
				}]
				
				this.covers = markers
				
			}
		}
	}
</script>

<style>
.sw-fad{
	position: fixed;
	top: 175rpx;
	right: 35rpx;
	width: 100rpx;
	height: 100rpx;
	-webkit-border-radius: 24px;
	border-radius: 50rpx;
	border: 2px solid #333333;
	z-index: 200;
	background-color: #333333;
	color: #FFFFFF;
	line-height: 100rpx;
	text-align: center;
	font-weight: 400;
	opacity: .8;
}
.sw-fad-2{
	position: fixed;
	top: 175rpx;
	right: 155rpx;
	width: 100rpx;
	height: 100rpx;
	-webkit-border-radius: 24px;
	border-radius: 50rpx;
	border: 2px solid #333333;
	z-index: 200;
	background-color: #333333;
	color: #FFFFFF;
	line-height: 100rpx;
	text-align: center;
	font-weight: 400;
	opacity: .8;
}
.self-location{
	background-color: #333333;
	color: #FFFFFF;
	opacity: .8;
	position: fixed;
	bottom: 70rpx;
	width: 200rpx;
	text-align: center;
	padding: 20rpx;
	border-radius: 10rpx;
	left: 35%;
}
</style>
